<template>
    <div class="box mH20" @keyup.enter="todoAdd" >

        <el-row type="flex" justify="center" :gutter="10">
          <el-col :span="12">
                <el-input v-model.trim="input" placeholder="请输入Todo内容"></el-input>
          </el-col>
          <el-col :span="2">
                <el-button @click="todoAdd" type="primary" round>提交</el-button>
          </el-col>
        </el-row>

        <TodoList v-model:todoList="todoList" @todo-delete="todoDelete" @edit-todo="editTodo" @edit-complete="editComplete" @todo-state-change="todoStateChange" ></TodoList>
    </div>
</template>

<script lang="ts" >
import { ref, reactive } from "vue";
import Momo from "./Momo.vue";
import TodoList from "../components/TodoList.vue";
import calendar from "../utils/calendar";
import { ElMessage } from "element-plus";

export default {
    components: {
        Momo,
        TodoList
    },
    data() {
        return {}
    },
    setup(props, { attrs, slots, emit }) {

        const input = ref("");
        const todoList = reactive([]);

        const todoAdd = ():boolean => {
            if (input.value === "") {
                ElMessage.error('输入的值为空');
                return false;
            }

            todoList.push({ value: input.value, createTime: calendar.getDateSlot(0), state: 0 });
            input.value = "";
            console.log("todoList", todoList);
        };
        
        const editTodo = (index: number):void => {
            todoList[index].state = 2;
        };

        const editComplete = (index: number):void => {
            todoList[index].state = 0;
        };

        const todoStateChange = (index: number):void => {
            todoList[index].state = todoList[index].state === 0 ? 1 : 0 ; 
        };

        const todoDelete = (index: number):void => {
            let serial: number = todoList.findIndex((p, idx) => idx !== index);

            todoList.splice(serial, 1);
        };

        return {
            input,
            todoList,
            todoAdd,
            editTodo,
            editComplete,
            todoStateChange,
            todoDelete
        };
    },
    created() {},
    mounted() {}
}
</script>

<style lang="less" scoped>
    .box {
        
    }
</style>